<template>
    <div class="ChangePassword">
        <MyHead title="修改密码" :isrigth="false"></MyHead>

        <div class="PromptText">修改密码</div>
        <van-form ref="fromLogin">
            <van-cell-group inset>
                <div class="pwdtemplate">
                    <van-field v-model="params.oldpwd" :type="iseys1 ? 'text' : 'password'" label="旧密码"
                        :rules="oldpwdrules" />
                    <div class="eyes" @click="ispwdeyes1">
                        <span v-show="iseys1"><i class="iconfont icon-yanjing"></i></span>
                        <span v-show="!iseys1"><i class="iconfont icon-bukejian"></i></span>
                    </div>
                </div>
                <div class="pwdtemplate">
                    <van-field v-model="params.pwd" :type="iseys2 ? 'text' : 'password'" label="新密码" :rules="pwdrules"
                        @update:model-value="conpwdhandler" />
                    <div class="eyes" @click="ispwdeyes2">
                        <span v-show="iseys2"><i class="iconfont icon-yanjing"></i></span>
                        <span v-show="!iseys2"><i class="iconfont icon-bukejian"></i></span>
                    </div>
                </div>
                <div class="pwdtemplate">
                    <van-field v-model="params.conpwd" :type="iseys3 ? 'text' : 'password'" label="确认密码"
                        :rules="conpwdrules" />
                    <div class="eyes" @click="ispwdeyes3">
                        <span v-show="iseys3"><i class="iconfont icon-yanjing"></i></span>
                        <span v-show="!iseys3"><i class="iconfont icon-bukejian"></i></span>
                    </div>
                </div>
                <div v-show="PromptText" class="PwdPromptText">两次密码不一致</div>
            </van-cell-group>
        </van-form>

        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

let iseys1 = ref(false)
let iseys2 = ref(false)
let iseys3 = ref(false)
let PromptText = ref(false)

let params = reactive({
    oldpwd: '',
    pwd: '',
    conpwd: '',
})

//密码显隐
const ispwdeyes1 = () => {
    iseys1.value = !iseys1.value;
}
const ispwdeyes2 = () => {
    iseys2.value = !iseys2.value;
}
const ispwdeyes3 = () => {
    iseys3.value = !iseys3.value;
}



//确认密码验证函数
let conpwdhandler = () => {
    console.log(params.conpwd == params.pwd);
    if (params.conpwd == params.pwd || params.conpwd == '') {
        PromptText.value = false;
        return true
    } else {
        // fromLogin.value.validate()
        PromptText.value = true;
        return false
    }
}


//密码验证
let oldpwdrules = [
    { required: true, message: "请输入密码" },
    { pattern: /[\w]{6,20}/, message: '密码应为6-20位的数字字母下划线组成' },
]
let pwdrules = [
    { required: true, message: "请输入密码" },
    { pattern: /[\w]{6,20}/, message: '密码应为6-20位的数字字母下划线组成' },
    { validator: conpwdhandler }
]

//确实密码验证
let conpwdrules = [
    { validator: conpwdhandler,trigger:"onChange" }
]



</script>

<style lang="scss" scoped>

.ChangePassword{
    padding: 0 .2rem;
}
.PromptText {
    font-size: .3rem;
    margin: .3rem 0 .1rem .3rem;
    color: #777;
}

;

.pwdtemplate {
    display: flex;
    align-items: center
}

;

.PwdPromptText {
    // position: absolute;
    font-size: 0.14rem;
    color: #f00;
    margin-left: 2rem;
    margin-top: 0.04rem;
    z-index: 10000;

}

;</style>